<template>
  <div class="indexs">
    <div class="rightButtonHead">
      <h3>toc</h3>
    </div>
    <div class="rightButtonFoot">
      <div class="lis">
        <li v-for="(item, index) in childrenData" :key="index">
          <a :href="'#' + item.id">{{ item.text }}</a>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/request/request";
export default {
  data() {
    return {
      listData: [],
      childrenData: [],
    };
  },
  created() {
    this.articleData();
  },
  methods: {
    articleData() {
      api
        .post(
          "https://bjwz.bwie.com/wipi/api/article/48b5a1bb-e46a-4cf7-a67f-54c2a4a28c13/views"
        )
        .then((res) => {
          this.listData = res.data.data;
          this.childrenData = JSON.parse(this.listData.toc);
        });
    },
  },
};
</script>

<style lang="scss">
.indexs {
  margin-top: 5%;
  width: 100%;
  height: 500px;
  font-size: 15px;
}
.rightButtonHead {
  width: 100%;
  height: 5%;
  display: flex;
  align-items: center;
}
.rightButtonFoot {
  width: 100%;
  height: 400px;
  margin-top: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  .lis {
    width: 100%;
    height: 400px;
    overflow-y: scroll;
    margin-left: 10px;

    li {
      width: 100%;
      line-height: 40px;
      list-style-type: disc;
      a {
        color: #000;
      }
    }

    li a:hover {
      color: rgb(225, 28, 143);
    }
  }
}
</style>
